<template>
  <div class="teller-skill-match-manage" v-loading="loading" element-loading-text="加载中。。。">
    <div>
      <el-card class='cloud-teller-card'>
        <el-form ref='queryForm' :model='queryForm' size='mini' label-position='top'>
          <el-row :gutter="10">
         
            <el-col :md="6" :lg="4">
              <el-form-item label='技能组' prop='BUSITYPE'>
                <el-select v-model='queryForm.BUSITYPE' filterable>
                  <el-option v-for='item in busitypes' :key='item.BUSITYPE' :label='item.BUSITYPENAME' :value='item.BUSITYPE'>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md='6' :lg='4'>
              <el-form-item label='交易名称' prop='FLOWID'>
                <el-select v-model='queryForm.FLOWID' filterable>
                  <el-option v-for='item in FLOWNAMEOpions' :key='item.FLOWID' :label='item.FLOWNAME' :value='item.FLOWID'>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
        
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='primary' size='mini' icon='el-icon-search' @click="queryModel('search')">查询</el-button>
            </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('queryForm')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class='type-info-bottom'>
        <el-col :lg="2" :md="2" v-if="btnPermission('Button_Warning_Add')">
          <el-button type="primary" size="mini" @click="addDialogShow" icon='el-icon-plus'>新增</el-button>
        </el-col>
        <el-col :lg="2" :md="2" v-if="btnPermission('Button_Warning_Edit')">
          <el-button type="primary" size="mini" @click="updateDialogShow" icon='el-icon-edit' :disabled="!updateButtonShow">修改</el-button>
        </el-col>
        <el-col :lg="2" :md="2" v-if="btnPermission('Button_Warning_Delete')">
          <el-button type="primary" size="mini" @click="deleteConfirm" icon='el-icon-delete' :disabled="!delButtonShow">删除</el-button>
        </el-col>
        <el-table ref="tableData" :data='tableDataPage' border min-height="400" width='100%' class="tableMarginTop" header-row-class-name="tableHeaderClass" highlight-current-row @selection-change="selectChange">
          <el-table-column type="selection" width="40px"></el-table-column>
          <!-- 这里的prop按照返回的字段去更新 -->
       <el-table-column prop='BUSITYPE' label='技能组编号'></el-table-column>
          <el-table-column prop='BUSITYPENAME' label='技能组名称' ></el-table-column>
          <el-table-column prop='FLOWID' label='交易码'></el-table-column>
          <el-table-column prop='FLOWNAME' label='交易名称'></el-table-column>
          <el-table-column prop='VIDEOFLAG' label='视频处理标志'>
          <template slot-scope="scope">
                      <span v-if="scope.row.VIDEOFLAG=='0'">不开启音视频</span>
                      <span v-if="scope.row.VIDEOFLAG=='1'">开启音视频</span>
                      <span v-if="scope.row.VIDEOFLAG=='2'">开启音频</span>
                    </template>
          </el-table-column>
          <el-table-column prop='REMARK1' label='备注'></el-table-column>
          </el-table>
           <el-pagination style="text-align:right;margin-top:20px;" v-show="this.tableData" 
                :current-page="currentPage" background
                :page-size="pageSize"
                @current-change="changePage"
                layout="total, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
      </el-card>

      <keep-alive>
         <component :is='dialogList.CreateTellerMatchSkill' :option='addDialogOptions' @refreshTable="queryModel('search')"></component>
      </keep-alive>
       <keep-alive>
         <component :is='dialogList.UpdateTellerMatchSkill' :option='updateDialogOptions' @refreshTable="queryModel('search')" :message="this.multipleSelection"></component>
      </keep-alive>
    </div>

  </div>
</template>

<script>
  import CreateTellerMatchSkill from "./dialog/CreateTellerMatchSkill";
  import UpdateTellerMatchSkill from "./dialog/UpdateTellerMatchSkill";
  import selectTree from "@/components/selectTree2/";
  import toolBox from "@/CTManage/utils/toolBox";
  import getGlobalParams from '@/common/utils/getGlobalParams';
  //通讯相关
  import request from "@/common/utils/requestCT";
  import spinnerList from "@/message/spinnerDataQuery/spinner-data-query";
  import TellerSkillQuery from "@/message/CTManage/skill/teller-skill-query";//技能组信息查询
  import TellerMatchSkillDel from "@/message/CTManage/skill-transaction/skill-transaction-delete";
  import transactionNameQuery from "@/message/shared/transaction-name-query";//交易信息查询
  //技能组对应交易查询
  import channelTransaction from "@/message/CTManage/skill-transaction/skill-transaction-query";

  export default {
    name: "cloud-teller-manage",
    components: {
      selectTree
    },
    data() {
      return {
        FLOWNAMEOpions: [],
        //页面公用
        loading: false,
        //表格
        brno: [],
        tableTotal: 0,
        tableData: [],
        currentPage: 1,
        pageSize: getGlobalParams.get("PageSize"),
        addButtonShow: true,
        delButtonShow: false,
        updateButtonShow: false,
        queryForm: {
          FLOWID: '',
          BUSITYPE: '',
          WORKDAY: '',
          HOLIDAY: ''
        },
        multipleSelection: [],
        busitypes: [],
        telleridSelection: [],
        tellerWorkdayOpions: [{
            label: '可用',
            value: 0
          },
          {
            label: '不可用',
            value: 1
          }
        ],
        tellerHolidayOpions: [{
            label: '可用',
            value: 0
          },
          {
            label: '不可用',
            value: 1
          }
        ],
        dialogList: {
          CreateTellerMatchSkill,
          UpdateTellerMatchSkill
        },
        addDialogOptions: {
          isShow: false
        },
        updateDialogOptions: {
          isShow: false
        },
      };
    },
    mounted() {
      this.queryModel();
      this.transactionNameQuery()
    },
    computed: {
      tableDataPage() {
        return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
      }
    },
    methods: {
      busitypeFormat(row, column){
        for (let i = 0; i < this.tableData.length; i++) {
          if(row[column.property]==this.tableData[i].FLOWSUBTYPE){
            return 
          }
        }

      },
      async transactionNameQuery() {
        this.loading = true;
        this.tableData = [];
        this.tableTotal = 0;
        let resBody = new transactionNameQuery();
        let response = await request(resBody);
        this.loading = false;
        if (response.SYS_HEAD.ReturnCode == "000000") {
          
          this.FLOWNAMEOpions = response.RSP_BODY.resultSet;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          });
        }
      },
      selectChange(val) {
        this.multipleSelection = [];
        this.telleridSelection = [];
        if (val.length == 1) {
          this.delButtonShow = true;
          this.updateButtonShow = true;
          this.multipleSelection = val;
        } else if (val.length > 1) {
          this.delButtonShow = false;
          this.updateButtonShow = false;
        } else {
          this.delButtonShow = false;
          this.updateButtonShow = false;
        }
        for (var i = 0; i < val.length; i++) {
          this.telleridSelection[i] = val[i];
        }
      },
      addDialogShow() {
        this.addDialogOptions.isShow = !this.addDialogOptions.isShow;
      },
      updateDialogShow() {
        this.updateDialogOptions.isShow = !this.updateDialogOptions.isShow;
      },
      async delCloudTeller() {
        this.loading = true;
        let resBody = new TellerMatchSkillDel();
        resBody.data.FLOWID = this.telleridSelection[0].FLOWID;
        resBody.data.BUSITYPE = this.telleridSelection[0].BUSITYPE;
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.loading = false;
          this.$message({
            type: "success",
            message: "柜员对应用户删除成功!"
          });
          this.queryModel('search');
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          });
        }
      },
      deleteConfirm() {
        this.$confirm("此操作将永久删除柜员对应技能，是否继续？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.delCloudTeller();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      changePage(val) {
        this.currentPage = val
      },
      clearForm(item) {
        this.$refs["" + item].resetFields();
      },
      async queryModel(data) {
        if(data == 'search'){
          this.currentPage = 1;
        }
        this.loading = true;
        this.tableData = [];
        this.tableTotal = 0;
        let resBody = new channelTransaction();
        resBody.data.BUSITYPE = this.queryForm.BUSITYPE;
        resBody.data.FLOWID = this.queryForm.FLOWID;
        
        resBody.QueryPageNo = this.currentPage;
        resBody.QueryRowNum = this.pageSize;
        let response = await request(resBody);
        this.loading = false;
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.tableData = response.RSP_BODY.resultSet;
          this.tableTotal = response.RSP_BODY.total * 1 
          // || response.QUERY_INFO_HEAD.QueryAllDataCount;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          });
        }
      },
      // handleSizeChange() {
      //   this.queryModel();
      // },
    },
    async created() {
      // let resBody = new spinnerList();
      // resBody.QueryRowNum = getGlobalParams.get("PageSize");
      // resBody.QueryPageNo = this.currentPage;
      // resBody.data.spinnerList = [{
      //   spinnerName: "branch"
      // }];
      // let response = await request(resBody);
      // if (response.SYS_HEAD.ReturnCode == "000000") {
      //   this.brno = response.RSP_BODY.branchSpinner;
      // } else {
      //   this.$message({
      //     type: "error",
      //     message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
      //   });
      // };
      let resBodyTellerSkills = new TellerSkillQuery();
      let responseTellerSkills = await request(resBodyTellerSkills);
      if (responseTellerSkills.SYS_HEAD.ReturnCode == "000000") {
        this.busitypes = responseTellerSkills.RSP_BODY.resultSet;
      } else {
        this.$message({
          type: "error",
          message: "请求失败，错误码:" + responseTellerSkills.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
        });
      }
    }
  };
</script>


<style lang="scss">
  .type-info-bottom {
    margin-top: 10px;
  }
  .box {
    margin-top: 20px;
    text-align: right;
  }
  .headerClass {
    background: #f7f7f7 !important;
  }
  .el-date-editor.el-input {
    width: 100% !important;
  }
  .el-card {
    overflow: inherit;
  }
</style>
